<template>
  <div ref="imageItem" class="var" :class="{'active':activedVisi}"
       :style="{
          'background-color': localDragData.Colour,
          'left': localDragData.x+'px',
          'top': localDragData.y+'px',
          'width': localDragData.localWidth + 'px',
          'height': localDragData.localHeight + 'px',
          padding: '10px'
        }"
       @mousedown="activatedBtn" @mouseup="mouseupActivatedBtn" v-trag="{actived: activedVisi, cb: dragFun, downUp: downUp }">
    <div v-html="localDragData.Desc" style="overflow: hidden hidden;height: 100%;width: 100%;"></div>
    <div v-if="activedVisi">
      <div class="vdr-stick vdr-stick-tl" v-if="localType('tl')" v-trag-tl="{type: 'tl', callFun: callFun, callUpFun: callUpFun }" style="width: 8px; height: 8px; top: -4px; left: -4px;"></div>
      <div class="vdr-stick vdr-stick-tm" v-if="localType('tm')" v-trag-tl="{type: 'tm', callFun: callFun, callUpFun: callUpFun }" style="width: 8px; height: 8px; top: -4px; left: calc(50% - 4px);"></div>
      <div class="vdr-stick vdr-stick-tr" v-if="localType('tr')" v-trag-tl="{type: 'tr', callFun: callFun, callUpFun: callUpFun }" style="width: 8px; height: 8px; top: -4px; right: -4px;"></div>
      <div class="vdr-stick vdr-stick-mr" v-if="localType('mr')" v-trag-tl="{type: 'mr', callFun: callFun, callUpFun: callUpFun }" style="width: 8px; height: 8px; top: calc(50% - 4px); right: -4px;"></div>
      <div class="vdr-stick vdr-stick-br" v-if="localType('br')" v-trag-tl="{type: 'br', callFun: callFun, callUpFun: callUpFun }" style="width: 8px; height: 8px; bottom: -4px; right: -4px;"></div>
      <div class="vdr-stick vdr-stick-bm" v-if="localType('bm')" v-trag-tl="{type: 'bm', callFun: callFun, callUpFun: callUpFun }" style="width: 8px; height: 8px; bottom: -4px; right: calc(50% - 4px);"></div>
      <div class="vdr-stick vdr-stick-bl" v-if="localType('bl')" v-trag-tl="{type: 'bl', callFun: callFun, callUpFun: callUpFun }" style="width: 8px; height: 8px; bottom: -4px; left: -4px;"></div>
      <div class="vdr-stick vdr-stick-ml" v-if="localType('ml')" v-trag-tl="{type: 'ml', callFun: callFun, callUpFun: callUpFun }" style="width: 8px; height: 8px; bottom: calc(50% - 4px); left: -4px;"></div>
<!--      <div style="position: absolute; bottom: 0; right: 0" v-if="!type">-->
<!--        <el-color-picker v-model="color" @active-change="activeChange"></el-color-picker>-->
<!--&lt;!&ndash;        <i class="iconfont el-icon-more" style="color: white"></i>&ndash;&gt;-->
<!--      </div>-->
    </div>
    <div>
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
import { drag, dragTl } from "./drag_canvers";

export default {
  name: "tragItem",
  inject: {
    initData: {
      default: null
    }
  },
  props: {
    itemPosition: {
      type: Object,
      default: () => {
        return null
      }
    },
    dragData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    type: {
      type: String,
      default: () => {
        return undefined
      }
    },
    lineWidth: {
      type: String,
      default: () => {
        return '5'
      }
    },
    scrollFun: Function
  },
  computed: {
    localDragData: {
      get () {
        return this.dragData
      },
      set (val) {
        this.$emit('update:dragData', val)
      }
    }
  },
  data () {
    return {
      localWidth: '100',
      localHeight: '100',
      activedVisi: false,
      preClickTimer: 0,
      isClick: false
    }
  },
  directives: {
    trag: drag,
    // 左上
    tragTl: dragTl
  },
  mounted() {
    this.lineWidthByType(this.type)
    // if (this.$el.parentNode) {
      document.removeEventListener('mousedown', this.disActivatedBtn)
      document.addEventListener('mousedown', this.disActivatedBtn)
    // }
  },
  destroyed() {
    // if (this.$el.parentNode) {
      document.removeEventListener('mousedown', this.disActivatedBtn)
    // }
  },
  methods: {
    callUpFun () {
      this.initData.saveMoveUpFun({
        itemPosition: this.itemPosition,
        item: this.dragData,
      })
    },
    callFun (style) {
      this.localDragData.x = style.left
      this.localDragData.y = style.top
      this.localDragData.localWidth = style.width
      this.localDragData.localHeight = style.height
    },
    // 初始宽度
    lineWidthByType (type) {
      if (this.type === 'vertical') {
        this.localDragData.localWidth = this.lineWidth || '10'
        this.localDragData.localHeight = '100'
      } else if (this.type === 'horizontal') {
        this.localDragData.localWidth = '100'
        this.localDragData.localHeight = this.lineWidth || '10'
      } else {
        this.localDragData.localWidth = this.localDragData.localWidth || '100'
        this.localDragData.localHeight = this.localDragData.localHeight || '100'
        let top = Number((this.$refs.imageItem.style.paddingTop || '').toString().replace('px', ''))
        let bo = Number((this.$refs.imageItem.style.paddingBottom || '').toString().replace('px', ''))
        this.localDragData.paddingtb = top + bo
      }
    },
    localType (type) {
      if (this.type) {
        if (this.type === 'vertical') {
          return type === 'tm' || type === 'bm';
        } else if (this.type === 'horizontal') {
          return type === 'mr' || type === 'ml';
        }
        return true
      }
      return true
    },
    dragFun (el, x, y) {
      if (this.scrollFun) {
        let xy = this.scrollFun(x, y)
        this.localDragData.x = xy.x
        this.localDragData.y = xy.y
      }
      el.style.left =  `${this.localDragData.x}px`
      el.style.top =  `${this.localDragData.y}px`
    },
    // 松下之后的位置
    downUp (el) {
      let x = (this.localDragData.x || 0).toString().replace('px', '')
      let y = (this.localDragData.y || 0).toString().replace('px', '')
      let h = (this.localDragData.localHeight || 0).toString().replace('px', '')
      h = (Number(h) + this.localDragData.paddingtb).toString()
      let contentHeight = (this.localDragData.contentHeight || 0).toString().replace('px', '')
      if (Number(x) <= 0) {
        x = 0
      }
      if (Number(y) <= 0) {
        if (this.itemPosition.index === 0) {
          y = 0
        }
      }
      if (Number(y) >= (Number(contentHeight) - Number(h))) {
        if ((this.itemPosition.index + 1) === this.itemPosition.total) {
          y = contentHeight - h
        }
      }
      if (this.initData) {
        let xy = this.initData.exchangeData({
          itemPosition: this.itemPosition,
          item: this.dragData,
          x,
          y
        })
        x = xy.x
        y = xy.y
      }
      this.dragFun(el, x, y)
    },
    activatedBtn() {
      this.activedVisi = true
      this.isClick = true
      this.$emit('isClick', this.activedVisi, this.dragData)
    },
    mouseupActivatedBtn () {
      this.preClickTimer = new Date().getTime()
      this.isClick = false
    },
    disActivatedBtn () {
      if ((new Date().getTime() - this.preClickTimer) > 100 && this.isClick === false) {
        this.activedVisi = false
      }
    }
  }
}
</script>

<style scoped>
.var {
  z-index: 90;
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: #00a854;
}
.var.active:before {
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  content: '';
  height: 100%;
  width: 100%;
  outline: 1px dashed #d6d6d6;
  /*cursor: all-scroll;*/
}
.var.active:before{
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.vdr-stick {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  font-size: 1px;
  background: #fff;
  border: 1px solid #6c6c6c;
  -webkit-box-shadow: 0 0 2px #bbb;
  box-shadow: 0 0 2px #bbb;
}
/*左上*/
.vdr-stick-tl:hover {
  cursor: nwse-resize;
}
/*上*/
.vdr-stick-tm:hover {
  cursor: ns-resize;
}
/*右上*/
.vdr-stick-tr:hover {
  cursor: nesw-resize;
}
/*右*/
.vdr-stick-mr:hover {
  cursor: ew-resize;
}
/*右下*/
.vdr-stick-br:hover {
  cursor: nwse-resize;
}
/*下*/
.vdr-stick-bm:hover {
  cursor: ns-resize;
}
/*左下*/
.vdr-stick-bl:hover {
  cursor: nesw-resize;
}
/*左*/
.vdr-stick-ml:hover {
  cursor: ew-resize;
}
</style>